<!--
 * @Author: 宁乃楚
 * @Date: 2021-06-26 09:17:50
 * @LastEditTime: 2021-07-08 19:19:49
 * @LastEditors: 宁乃楚
 * @Description: In User Settings Edit
 * @FilePath: \day08\家政\briup-ui\src\pages\admin\order\List.vue
-->
<template>
  <!-- 订单管理页 -->
  <div class="order management">
    <!-- Tabs标签页选项卡功能 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="所有订单" name="first" />
      <el-tab-pane label="待支付" name="second" />
      <el-tab-pane label="待派单" name="third" />
      <el-tab-pane label="待接单" name="fourth" />
      <el-tab-pane label="待服务" name="fifth" />
      <el-tab-pane label="待确认" name="sixth" />
      <el-tab-pane label="已完成" name="seventh" />
      <!-- 所有订单表格 -->
      <el-table :data="orderData" style="width: 100%">
        <!-- 订单编号 -->
        <el-table-column prop="id" label="订单编号" align="center" />
        <!-- 下单时间 -->
        <el-table-column
          prop="orderTime"
          label="下单时间"
          :formatter="formatDate"
          align="center"
        />
        <!-- 总价 -->
        <el-table-column prop="total" label="总价" align="center">
          <template slot-scope="scope">
            <span>￥</span>
            <span style="color: #e65d6e; font-size: 18px; margin-right: 3px">{{
              scope.row.total
            }}</span>
            <span>元</span>
          </template>
        </el-table-column>
        <!-- 状态 -->
        <el-table-column prop="status" label="状态" align="center" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === '待派单'" type="success"
              >待派单</el-tag
            >
            <el-tag v-else-if="scope.row.status === '待接单'" type="warning"
              >待接单</el-tag
            >
            <el-tag v-else-if="scope.row.status === '待服务'" type="info"
              >待服务</el-tag
            >
            <el-tag v-else-if="scope.row.status === '待确认'" type="warning"
              >待确认</el-tag
            >
            <el-tag v-else-if="scope.row.status === '已完成'" type="info"
              >已完成</el-tag
            >
          </template>
        </el-table-column>
        <!-- 顾客ID -->
        <el-table-column prop="customer.id" label="顾客ID" align="center" />
        <!-- 员工ID -->
        <el-table-column
          v-if="status != '待支付' && status != '待派单'"
          prop="employeeId"
          label="员工ID"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.employeeId">{{ scope.row.employeeId }}</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="toOrderDeail(scope.row.id)"
              >详情</el-button
            >
            <el-button
              v-if="scope.row.status == '待派单'"
              style="color: #30b08f"
              type="text"
              size="small"
              @click="send(scope.row.id)"
              >派单</el-button
            >
            <template
              v-else-if="scope.row.status == '待接单'"
              slot-scope="scope"
            >
              <el-button
                type="text"
                size="small"
                @click="takeOrder(scope.row.id)"
                >接单</el-button
              >
              <el-button
                style="color: #ffba00"
                type="text"
                size="small"
                @click="cancelSend(scope.row.id)"
                >取消派单</el-button
              >
            </template>

            <el-button
              v-else-if="scope.row.status == '待确认'"
              style="color: #ffba00"
              type="text"
              size="small"
              @click="finishSend(scope.row.id)"
              >确认订单</el-button
            >
            <el-button
              v-else-if="scope.row.status == '已完成'"
              style="color: red"
              type="text"
              size="small"
              @click="deleteSend(scope.row.id)"
              >删除订单</el-button
            >
            <el-button
              v-else-if="scope.row.status == '待服务'"
              style="color: #30b08f"
              type="text"
              size="small"
              @click="startServe(scope.row.id)"
              >完成服务</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination
        class="paginetion"
        :current-page="currentPage"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-tabs>
    <!-- 模态框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="centerDialogVisible"
      width="50%"
      center
      @close="dialogClose"
    >
      <el-radio-group v-model="waiterId">
        <el-radio v-for="item in customeData1" :key="item.id" :label="item.id" border>{{item.realname}}</el-radio>
        <el-radio v-for="item in customeData2" :key="item.id" :label="item.id" border>{{item.realname}}</el-radio>
      </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click.prevent="submitForm(orderId, waiterId)"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 引入axios @指代src路径
import { get } from "@/utils/request";
import moment from "moment";
export default {
  data() {
    return {
      activeName: "first",
      centerDialogVisible: false,
      // 订单数组 -表格数据源的数据
      orderData: [],
      // 当前页码
      currentPage: 1,
      // 每页要展示的数据条数
      pageSize: 6,
      // 页面展示数据的总条数
      total: 10,
      // 格式化订单时间
      dialogTitle: "",
      // 订单状态
      status: "",
      // 订单的Id
      detail: "",
      sendStaff: "1",
      // 员工Id
      waiterId: "",
      // 订单Id
      orderId: "",
      // 接单者
      employee: "",
      label: "",
      type:'',
      customeData1:[],
      customeData2:[],
    };
  },
  computed: {},
  created() {
    this.getAllOrdertData();
    this.getcustomeData();
  },
  mounted() {},
  methods: {
    // 派单
    async submitForm(orderId, waiterId) {
      //  发送派单请求
      const res = await get("/order/sendOrder", { orderId, waiterId });
      // 给用户一个成功或失败的提示
      if (res.status == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        // 重新刷新页面的数据
        this.centerDialogVisible = false;
        const test = "待派单";
        this.getAllOrdertData(test);
      } else {
        this.$message.error(res.message);
      }
    },
    // 接单
    async takeOrder(id) {
      const data = {
        orderId: id,
      };
      const res = await get("/order/takeOrder", data);
      // 给用户一个成功或失败的提示
      if (res.status == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        const test = "待接单";
        this.getAllOrdertData(test);
      } else {
        this.$message.error(res.message);
      }
    },
    // 确认订单完成
    async finishSend(id) {
      const data = {
        orderId: id,
      };
      const res = await get("/order/confirmOrder", data);
      // 给用户一个成功或失败的提示
      if (res.status == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        const test = "待确认";
        this.getAllOrdertData(test);
      } else {
        this.$message.error(res.message);
      }
    },
    // 开始服务
    async startServe(id) {
      console.log(id);
      const data = {
        orderId: id,
      };
      const res = await get("/order/serviceCompleteOrder", data);
      // 给用户一个成功或失败的提示
      if (res.status == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        const test = "待服务";
        this.getAllOrdertData(test);
      } else {
        this.$message.error(res.message);
      }
    },
    // 删除已完成的订单
    async deleteSend(id) {
      const data = {
        id,
      };
      const res = await get("/order/deleteById", data);
      // 给用户一个成功或失败的提示
      if (res.status == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        const test = "已完成";
        this.getAllOrdertData(test);
      } else {
        this.$message.error(res.message);
      }
    },
    // 跳转到Detail页面
    toOrderDeail(id) {
      // 通过特定的方法  进行路由的切换
      // 通过一个$router.push进行跳转
      this.$router.push({
        // 对象属性参数
        path: "details",
        // 通过name进行页面的切换
        // name:'MeInfo'
        // 获取到我的id
        query: {
          detail: id,
        },
      });
    },
    // 获取所有订单
    async getAllOrdertData(label,b) {
      if(b==1){
        // 获取参数
        var data = {
          page: this.currentPage,
          pageSize: this.pageSize,
          status: this.status,
        };
      }else if(label=='所有订单'&&b==0){
        // 获取参数
        var data = {
          page: this.currentPage,
          pageSize: this.pageSize,
        };
      }
      else{
         var data = {
          page: this.currentPage,
          pageSize: this.pageSize,
          status: label,
        };
      }
      // 通过对应的参数发送网络请求，获取产品数据
      const res = await get("/order/pageQuery", data);
      // 将data中的产品数组 进行赋值
      this.orderData = res.data.list;
      this.employee = res.data.list.employee;
      // 页面总数据条数 赋值
      this.total = res.data.total;
    },
    // 页面切换
    handleClick(tab) {
      var test = tab.label;
      this.status = tab.label;
      this.label = tab.label;
      this.currentPage = 1;
      this.pageSize = 8;
      if (test == "所有订单") {
        this.type=0
        this.getAllOrdertData(test,0);
      } else {
        this.type=1
        this.getAllOrdertData(test,0);
      }
    },
    // 控制每页条数的方法
    handleSizeChange(val) {
      // 将每页要展示的数据的条数 进行一个更新
      this.pageSize = val;
      // 将当前的页数 重置到第一页
      this.currentPage = 1;
      let test=this.status;
      console.log(test);
       if (test == "") {
        let tom='所有订单'
        this.getAllOrdertData(tom,0);
      } else {
        this.getAllOrdertData(test,0);
      }

    },
    // 控制当前显示的页数
    handleCurrentChange(val) {
      // 将当前页数 与 分页插件动态点击控制的页数相绑定
      this.currentPage = val;
      let test=this.status
      let type=this.type
      if(type){
        // 重新调用获取所有产品数据的方法
        this.getAllOrdertData(test,1);
      }else{
        let test='所有订单'
        this.getAllOrdertData(test,0);
      }
      
    },
    // 取消派单
    async cancelSend(orderId) {
      // 发送取消派单请求
      const res = await get("/order/cancelSendOrder", { orderId });
      // 给用户一个成功或失败的提示
      if (res.status == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        // 重新刷新页面的数据
        const test = "待派单";
        this.getAllOrdertData(test,0);
      } else {
        this.$message.error(res.message);
      }
    },
    // 时间格式化
    formatDate: function (row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
      // return moment(date).format("YYYY-MM-DD");
    },
    send(id) {
      // 设置模态框的标题
      this.dialogTitle = "派单";
      // 模态框显示出来
      this.centerDialogVisible = true;
      this.orderId = id;
    },
    dialogClose() {
      // 关闭模态框
      setTimeout(() => {
        this.dialogVisible = false;
      }, 200);
    },
    // 查找员工列表
    async getcustomeData() {
      let data1 = {
        page: 1,
        pageSize: 100,
        roleId: 1,
      },
       data2 = {
        page: 1,
        pageSize: 100,
        roleId: 2,
      }
      // 通过对应的参数发送网络请求，获取产品数据
      let res = await get("/baseUser/pageQuery", data1);
      let val = await get("/baseUser/pageQuery", data2);
      // 将data中的产品数组 进行赋值
      this.customeData1 = res.data.list
      this.customeData2 = val.data.list
    },

  },
};
</script>
<style scoped>
/* 分页区域的样式 */
.paginetion {
  position: fixed;
  bottom: 50px;
  right: 10px;
}
</style>
